<template>
	<view class="home">
		<view>
			<scroll-view class="navscroll" scroll-x="true" scroll-left="120">
				<view class="navscroll-item" :class="index == navIndex ? 'active':'' " @click="clickNav(index, item)"
					v-for="(item, index) in NavList">{{item.classname}}</view>
			</scroll-view>
		</view>

		<view class="content">
			<view class="row" v-for="(item, index) in NewsList">
				<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
			</view>
		</view>

		<view class="nodata" v-if="!NewsList.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>

		<view class="loading" v-if="NewsList.length">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: 0,
				navIndex: 0,
				newsClassId: 50,
				newsNum: 8,
				pageSize: 1,
				NavList: [],
				NewsList: []
			}
		},
		async onLoad() {
			await this.getNavList()
			await this.getNewsList()
		},
		onReachBottom() {
			// console.log('触底');
			if (this.loading == 2) return
			this.pageSize += 1
			this.loading = 1
			setTimeout(()=>{this.getNewsList()},500)
			// this.getNewsList()
		},
		methods: {
			// 获取新闻栏目
			getNavList() {
				uni.request({
					url: `https://ku.qingnian8.com/dataApi/news/navlist.php`,
					success: (res) => {
						// console.log(res);
						this.NavList = res.data
					}
				})
			},
			// 获取新闻列表
			getNewsList() {
				uni.request({
					url: `https://ku.qingnian8.com/dataApi/news/newslist.php?`,
					data: {
						cid: this.newsClassId,
						num: this.newsNum,
						page: this.pageSize
					},
					success: (res) => {
						console.log(res);
						res.data.length == 0 ? this.loading = 2 : this.loading = 0
						this.NewsList.push(...res.data)
					}
				})
			},
			// 点击选择栏目
			clickNav(index, {
				id: cid
			}) {
				this.navIndex = index
				this.newsClassId = cid
				this.pageSize = 0
				this.loading = 0
				this.NewsList = []
				console.log(index, cid);
				this.getNewsList()
			},
			// 跳转到项目详情页面
			goDetail({
				classid: cid,
				id
			}) {
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${cid}&id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		color: #333;

		.navscroll {
			width: 100%;
			position: fixed;
			top: var(--window-top);
			white-space: nowrap;
			background: #F7F8FA;
			z-index: 100;

			/deep/ ::-webkit-scrollbar {
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}

			.navscroll-item {
				height: 100rpx;
				display: inline-block;
				padding: 0 30rpx;
				line-height: 100rpx;
				font-size: 36rpx;

				&.active {
					color: #31C27C;
				}
			}
		}

		.content {
			padding: 30rpx;
			padding-top: 130rpx;

			.row {
				border-bottom: 1px dotted #efefef;
				padding: 20rpx 0;
			}
		}

		.nodata {
			display: flex;
			justify-content: center;

			image {
				width: 360rpx;
			}
		}

		.loading {
			text-align: center;
			font-size: 26rpx;
			color: #888;
			line-height: 2em;
		}
	}
</style>